
@import "variables";

//
// Forms
// --------------------------------------------------


// Base styles
// --------------------------------------------------


// Span
.span-variant(@color) {
  color: @color;
}

.span-primary {
  .span-variant(@brand-primary);
}

.span-success {
  .span-variant(@brand-success);
}

.span-info {
  .span-variant(@brand-info);
}

.span-warning {
  .span-variant(@brand-warning);
}

.span-danger {
  .span-variant(@brand-danger);
}

// Input group
.input-group {
  & .input-group-addon {
    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
  }
}

.input-group-primary {
  & .input-group-addon {
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  }
}

// Success appears as green
.input-group-success {
  & .input-group-addon {
    .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
  }
}
// Info appears as blue
.input-group-info {
  & .input-group-addon {
    .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
  }
}
// Warning appears as orange
.input-group-warning {
  & .input-group-addon {
    .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
  }
}
// Danger and error appear as red
.input-group-danger {
  & .input-group-addon {
    .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
  }
}


// Selectize

.selectize-input {
  & .item {
    font-size: @font-size-base;
  }
  & input {
    font-size: @font-size-base;
  }
}

.selectize-dropdown {
  font-size: @font-size-base;
  .item {
    font-size: @font-size-base;
  }
}

.form-horizontal {

  @media (min-width: @screen-sm-min) {
    .control-label {
      font-size: @font-size-small;
      padding-top: (@padding-base-vertical + 2); // Default padding plus a border
      //padding-top: 0;
    }
  }

  @media (max-width: @screen-sm-max) and (min-width: @screen-sm-min) {
    .control-label-double {
      padding-top: 0;
    }
  }

}

// Image Upload

.image-group {
  font-size: 0;
}

@input-image: 72px;


.input-image {
  width: @input-image;
  height: @input-image;

  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;

  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }

  .operation {
    @operation-transition-duration: 300ms;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: @font-size-base;
    background-color: fade(@black, 70%);

    opacity: 0;
    //transform: translate3d(0, 100%, 0);
    transform: rotateX(-90deg);

    transition: transform @operation-transition-duration, opacity @operation-transition-duration;

    .operation-header {
      height: @font-size-base + 2px;
      padding: 1px 0;
      color: @brand-danger;
      .fa {
        font-size: @font-size-base;
        width: @font-size-base + 2px;
        &:hover, &:focus {
          cursor: pointer;
        }
      }
    }

    .operation-content {
      font-size: 0;
      .operation-btn-wrapper {
        width: 100%;
        text-align: center;
      }
      .btn-view-large {
        color: @gray-lighter;
        width: @line-height-computed * 2;
        font-size: @font-size-base;

        text-align: center;
        white-space: initial;
        background: transparent;
        outline: none;
        border: none;

        padding: 0;
        margin: 0 auto;

        &:hover, &:focus {
          cursor: pointer;
          color: @white;
        }
      }
    }
  }

  .image-thumbnail {
    width: @input-image;
    height: @input-image;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @gray-lighter;
    overflow: hidden;

    img {
      max-width: @input-image;
      max-height: @input-image;
      overflow:hidden;

      max-height: 100%;
      max-width: 100%;

      &.loading {
        width: 32px;
        height: 32px;
      }
    }
    img.img-horizontal {
      width: 100%;
    }
    img.img-vertical {
      height: 100%;
    }

    .operation {
      opacity: 1;
      transform: none;
      transition: none;
      left: auto;
      bottom: auto;
      width: @font-size-base + 2px;
      height: @font-size-base + 2x;
      background-color: @brand-danger;

      //border: 16px solid fade(@black, 70%);
      //border-left-color: transparent;
      //border-bottom-color: transparent;
      //background-color: transparent;
      .operation-header {
        height: @font-size-base + 2px;
        width: @font-size-base + 2px;
        font-size: 0;
        color: @white;
        .fa {
          //margin-top: -@font-size-base;
        }
      }
    }

    &:hover, &:focus {
      background-color: darken(@gray-lighter, 5%);
    }

  }

  .image-upload {
    width: @input-image;
    height: @input-image;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @gray-lighter;
    overflow: hidden;
  }

  .image-wrapper {
    width: @input-image;
    height: @input-image;
    background-color: @gray-lighter;
    overflow: hidden;
  }

  &:hover, &:focus {

    & > .operation {
      opacity: 1;
      //transform: translate3d(0, 0, 0);
      transform: rotateX(0);
    }
  }

  .caption {
    font-size: @font-size-small;
    line-height: @font-size-small;
    height: @line-height-computed;
    padding-top: 8px;
    text-align: center;
  }

  &.has-caption {
    height: @input-image + @line-height-computed;
  }
}

.input-image-add {


  .image-upload {
    color: @brand-success;
  }

  @input-image-fa: @font-size-base;

  .fa {
    font-size: @input-image-fa;
    width: @input-image-fa;
    height: @input-image-fa;
  }

  .image-wrapper {
    &:hover, &:focus {
      .image-upload {
        background-color: darken(@gray-lighter, 5%);
        cursor: pointer;
      }
    }
  }
}

.label-checkbox-single {
  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @padding-base-vertical 0;
  font-size: @font-size-base;
  line-height: @line-height-base;
}

.error-messages {
  position: absolute;
  right: @form-group-margin-bottom;
  font-size: @font-size-small;

  .error {
    color: @brand-danger;
  }
}
